<template>
  <div>
    <div class="energy-table">
      <div class="table-title">
        <h2>临安区公共机构车辆基本情况</h2>
      </div>
      <div class="table-content">
        <div class="table-select">
          <div class="table-selectItem">
            <label>填报单位：</label>
            <select style="max-width: 280px;" v-model="carInfo.Department" @change="doSearch('1')">
              <option :key="i" v-for="(item,i) in departments" :value="item">{{item}}</option>
            </select>
          </div>
          <div class="table-selectItem">
            <label>制表：</label>
            <input type="text" v-model="carInfo.OfficeAddress">
          </div>
        </div>
        <table width="100%" border="1" cellpadding="10">
          <thead style="background-color:#E7F3FF;">
            <tr height="35px;">
              <th style="width:40px;">序号</th>
              <th>车牌号</th>
              <th>车型</th>
              <th>购置时间</th>
              <th>排量</th>
              <th>申报开始时间</th>
              <th>申报结束时间</th>
              <th>备注</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr :key="index" v-for="(item,index) in carData ">
              <td>{{index+1}}</td>
              <td>{{item.Number}}</td>
              <td>{{item.Type}}</td>
              <td>{{item.BoughtAt.substring(0,11)}}</td>
              <td>{{item.Displacement}}</td>
              <td>{{item.BeginTime.substring(0,11)}}</td>
              <td>{{item.EndTime.substring(0,11)}}</td>
              <td>{{item.Remark}}</td>
              <td>
                <span @click="showMask(item)">编辑</span>
              </td>
            </tr>
            <tr>
              <td colspan="9" align="center" valign="middle">
                <a :key="n" :class="[pageIndex==n?'selectedA':'']" v-for="n in pageCount" @click="doSearch(n)">{{n}}</a>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="explain">
          <p>*当申报结束时间为：9999-09-09时，则是永远申报，否则到申报结束时间后就不需要申报！</p>
          <p>车辆信息管理无删除功能，主要是为因为删除车辆信息会影响到以前申报的数据，如果您在填写此信息时多填了车辆信息，可以通过设置一个过期的 "申报结束时间"，这样就不用申报该车的数据了。</p>
        </div>
        <div class="table-button">
          <form method="post" target="abc" ref="submitForm" :action="baseUrl+'/api/Car/import?department='+carInfo.Department" enctype="multipart/form-data">
            <a href="javascript:;" class="file">批量导入
              <input type="file" name="file" @change="changeFn($event)">
            </a>
          </form>
          <a class="downLoad" :href="baseUrl+'/template/car.csv'">下载模板</a>
          <input type="button" value="新增车辆" @click="showMask()">
          <input type="button" value="打印" @click="prints">
        </div>
      </div>
    </div>
    <div class="table-mask" v-if="isMask">
      <div class="table-maskContent">
        <h2>{{maskTitle}}</h2>
        <div class="list-row">
          <label>车牌号：</label>
          <input type="text" v-model="carInfo.Number">
          <span>*</span>
        </div>
        <div class="list-row">
          <label>车型：</label>
          <input type="text" v-model="carInfo.Type">
          <span>*</span>
        </div>
        <div class="list-row">
          <label>购置时间：</label>
          <input type="date" v-model="carInfo.BoughtAt">
          <span>*</span>
        </div>
        <div class="list-row">
          <label>排量：</label>
          <input type="text" v-model="carInfo.Displacement">
          <span>&nbsp;&nbsp;</span>
        </div>
        <div class="list-row">
          <label>申报开始时间：</label>
          <input type="date" v-model="carInfo.BeginTime">
          <span>*</span>
        </div>
        <div class="list-row">
          <label>申报结束时间：</label>
          <input type="date" v-model="carInfo.EndTime">
          <span>*</span>
        </div>
        <div class="list-row list-rowCheckbox">
          <input type="checkbox" id="checkbox" v-model="checked" @change="changeCheck">
          <label>永远申报</label>
        </div>
        <div class="list-row">
          <label style="padding-right:8px;">备注：</label>
          <textarea style="margin-left:10px;" v-model="carInfo.Remark"></textarea>
          <span>&nbsp;&nbsp;</span>
        </div>
        <div class="table-maskBtn">
          <input type="button" value="保存" @click="addCar">
          <input type="button" value="关闭" @click="isMask=false">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMask: false,
      departments: [],
      checked: false,
      actionUrl: '',
      pageIndex: 1,
      pageSize: 20,
      pageCount: 1,
      departName: '',
      maskTitle: '新增车辆',
      carInfo: {
        Department: '',
        Number: '',
        Type: '',
        BoughtAt: '',
        BeginTime: '',
        EndTime: '',
        Remark: '',
        Displacement: '',
        OfficeAddress: ''
      },
      carData: []
    }
  },
  methods: {
    showMask(obj) {
      this.isMask = true;
      this.maskTitle = obj ? '编辑车辆' : '新增车辆';
      if (obj) {
        obj.BeginTime = obj.BeginTime.substring(0, 10);
        obj.BoughtAt = obj.BoughtAt.substring(0, 10);
        obj.EndTime = obj.EndTime.substring(0, 10);
        this.carInfo = obj;
      } else {
        this.carInfo = {
          Number: '',
          Type: '',
          BoughtAt: '',
          BeginTime: '',
          EndTime: '',
          Remark: '',
          Displacement: ''
        }
        this.carInfo.Department = this.departName
      }
    },
    prints() {
      if (window.print != null) {
        window.print();
      }
      else {
        alert('您没有安装打印机，请安装后继续!')
      }
    },
    async getDepartments() {
      const result = await this.$get("/api/user/departments");
      this.departments = result
      this.carInfo.Department = result[0];
      this.departName = result[0]
      this.getCarList();
    },
    doSearch(num) {
      this.departName = this.carInfo.Department
      this.pageIndex = num;
      this.getCarList();
    },
    changeCheck() {
      this.carInfo.EndTime = this.checked ? '9999-09-09' : '';
    },
    async addCar() {
      var carInfo = this.carInfo;
      console.log(carInfo)
      if (carInfo.Number && carInfo.Type && carInfo.BoughtAt && carInfo.BeginTime && carInfo.EndTime) {
        try {
          const result = await this.$post('/api/Car', this.carInfo)
          alert('操作成功！')
          this.isMask = false;
          this.getCarList()
        } catch (error) {
          alert(error.message)
        }
      } else {
        alert('* 填写完整')
      }
    },
    async getCarList() {
      this.carData = [];
      const result = await this.$get("/api/Car", {
        departmentName: this.carInfo.Department,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      })
      console.log(result)
      this.carData = result.Data
      this.pageCount = Math.ceil(result.Count / this.pageSize)
    },
    changeFn(event) {
      this.$refs.submitForm.submit()
      this.getCarList()
    }
  },
  created() {
    this.getDepartments();
  }
}
</script>

<style lang="scss" scoped>
.energy-table {
  padding: 25px 0;
  height: 100%;
  width: 100%;
}

.table-title {
  height: auto;
  margin-bottom: 25px;
  h2 {
    text-align: center;
    margin-bottom: 5px;
    font-size: 16px;
  }
  span {
    width: 100%;
    display: inline-block;
    text-align: center;
    font-weight: bold;
  }
}

.explain {
  margin-top: 10px;
  p {
    color: red;
    font-size: 12px;
    line-height: 1.2;
  }
}

.table-content {
  height: auto;
  .table-select {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 25px;
    .table-selectItem {
      input {
        border: none;
        outline: none;
        border-bottom: 1px solid rgb(169, 169, 169);
        width: 320px;
      }
    }
  }
  table {
    td {
      padding: 8px 5px;
      text-align: center;
      a {
        margin-left: 10px;
        &:hover {
          color: #0000FF;
          cursor: pointer;
          text-decoration: underline;
        }
      }
      a.selectedA {
        font-weight: bold;
        text-decoration: underline;
        font-size: 15px;
      }
      span {
        &:hover {
          color: #0000FF;
          cursor: pointer;
          text-decoration: underline;
        }
      }
    }
  }
  .table-button {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    input {
      min-width: 60px;
      margin-left: 25px;
    }
    .file {
      position: relative;
      display: inline-block;
      background: #D0EEFF;
      border: 1px solid #99D3F5;
      border-radius: 4px;
      padding: 4px 12px;
      overflow: hidden;
      color: #1E88C7;
      text-decoration: none;
      text-indent: 0;
      line-height: 20px;
    }
    .file input {
      position: absolute;
      right: 0;
      top: 0;
      opacity: 0;
    }
    a.downLoad {
      display: inline-block;
      border: 1px solid #99D3F5;
      border-radius: 4px;
      padding: 4px 8px;
      text-decoration: underline;
      color: #1E88C7;
      text-decoration: underline;
      text-indent: 0;
      font-size: 12px;
      line-height: 20px;
      margin-left: 20px;
    }
  }
}

.table-mask {
  position: absolute;
  height: 540px;
  width: 580px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #FFF;
  padding: 20px 20px 10px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}

.table-maskContent {
  display: flex;
  flex-direction: column;
  h2 {
    display: flex;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 35px;
  }
  .list-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    label {
      display: inline-block;
      width: 100px;
      text-align: right;
    }
    input {
      height: 25px;
      width: 250px;
      margin-left: 10px;
      border-radius: 5px;
      padding: 0 5px;
      outline: none;
      border: 1px solid darkgray
    }
    textarea {
      resize: none;
      height: 70px;
      width: 250px;
      outline: none;
      border-radius: 5px;
      padding: 5px;
      border: 1px solid darkgray
    }
    span {
      padding-left: 10px;
      color: red;
    }
  }
  .list-rowCheckbox {
    justify-content: flex-start;
    padding-left: 185px;
    align-items: center;
    input[type=checkbox] {
      width: 15px;
      height: 15px;
    }
    label {
      padding-left: 5px;
      text-align: left;
    }
  }
}

.table-maskBtn {
  display: flex;
  margin-top: 20px;
  flex-direction: row;
  justify-content: center;
  input {
    height: 28px;
    width: 60px;
    margin-left: 55px;
  }
}
</style>
